<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Theme Viewer</title>

    <script src="/lib/Options.js"></script>
    <script src="/js/color-sync.js"></script>

    <link rel="stylesheet" type="text/css" href="/lib/Options.css" />
    <link rel="stylesheet" type="text/css" href="/css/window.css" />
    <link rel="stylesheet" type="text/css" href="/views/horizontal.css" />

    <style type="text/css">
        body {
            background-color: transparent;
        }
        .window-list {
            padding-top: 11px;
            padding-bottom: 10px;
            padding-left: 13px;
        }
        .window[data-last] {
            padding-right: 12px;
        }
    </style>
</head>
<body>
    <script src="/lib/UI%20Helper.js"></script>
    <script>
        /*global UI */

        (function () {
            "use strict";

            var list = document.createElement("div");
            list.className = "window-list";

            var index = 1;

            function makeWindow(info) {
                info = Object(info);

                list.appendChild(UI.create("div", function (element) {
                    element.className = "window";

                    if (info.selected) {
                        element.setAttribute("data-focused", "");
                    }
                    if (info.last) {
                        element.setAttribute("data-last", "");
                    }

                    element.appendChild(UI.create("div", function (element) {
                        element.className = "tab-icon-border";

                        element.appendChild(UI.create("div", function (element) {
                            element.className = "tab-icon-container";

                            element.appendChild(UI.create("div", function (element) {
                                element.className = "tab-icon";

                                element.appendChild(UI.create("input", function (element) {
                                    element.className = "tab-icon-text";
                                    element.value = index;

                                    index += 1;

                                    element.setAttribute("spellcheck", "false");
                                }));
                            }));
                        }));
                    }));

                    element.appendChild(UI.create("div", function (element) {
                        element.className = "tab-icon-dropdown";
                    }));

                    element.appendChild(UI.create("div", function (element) {
                        element.className = "tab-list-border";

                        element.appendChild(UI.create("div", function (element) {
                            element.className = "tab-list";
                        }));
                    }));
                }));
            }
            makeWindow({ selected: true });
            makeWindow({ last: true });

            document.body.appendChild(list);
        }());
    </script>
</body>
</html>
